.docs-nav {
	@include font-display;
	position: fixed;
	top: 150px;
	bottom: 0;
	left: 50%;
	z-index: 10;
	margin-left: 256px;
	max-width: 256px;
	width: 25%;
	padding: 20px;
	font-size: 14px;
	line-height: 18px;

	.active a {
		.is-moment & {
			border-left-color: rgba($color-moment, 0.3);
		}

		.is-moment-timezone & {
			border-left-color: rgba($color-moment-timezone, 0.3);
		}
	}

	a {
		display: block;
		text-decoration: none;
		border-left: 2px solid transparent;

		&:hover,
		&.active {
			.is-moment & {
				background: rgba($color-moment, 0.1);
				border-left-color: $color-moment;
			}

			.is-moment-timezone & {
				background: rgba($color-moment-timezone, 0.1);
				border-left-color: $color-moment-timezone;
			}
		}
	}
}

.docs-nav-search {
	margin-bottom: 10px;

	&-label { display: none; }
	&-input {
		@include font-body;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0 .25em;
		border: 1px solid #999;
		border-radius: 3px;
		font-size: 16px;
		line-height: 1.6;
		background: $white;
		color: $black;
	}
}

.docs-nav-links {
	overflow-y: auto;
	height: 95%;
}

.docs-nav-item {
	padding: 3px 25px;

	.is-moment & {
		color: $color-moment;
	}

	.is-moment-timezone & {
		color: $color-moment-timezone;
	}
}

.docs-nav-section {

	.docs-nav-item {
		display: none;
	}

	&.active {
		.docs-nav-item {
			display: block;
		}

		// .is-moment & {
		// 	background: rgba($color-moment, 0.1);
		// }
		//
		// .is-moment-timezone & {
		// 	background: rgba($color-moment-timezone, 0.1);
		// }
	}
}

.docs-nav-section-title {
	color: $black;
	font-size: 18px;
	line-height: 24px;
	padding: 5px 10px;
}

.docs {
	margin: 0 auto;
	max-width: 1024px;
}

.docs-content {
	margin-right: 25%;
	padding-right: 20px;
	padding-left: 30px;
	color: $black;
}

.docs-method-prose {
	p {
		font-size: 16px;
		margin: 0 0 10px;
	}

	pre {
		padding: 5px 10px;
	}

	table {
		width: 100%;
		margin-bottom: 20px;
	}

	td,
	th {
		padding: 3px 10px;
		background: #fff;
		text-align: left;
	}

	td {
		border: 1px solid mix($black, $white, 15%);
	}

	th {
		border: 1px solid mix($black, $white, 30%);
	}

	td:nth-of-type(1) {
		white-space: pre;
		text-align: right;
		width: 0;
	}

	td:last-of-type {
		width: 100%;
	}

	tr:nth-child(odd) td,
	tr:nth-child(odd) th {
		background: 0;
	}

	ol {
		counter-reset: li -1;
		list-style: none;
		padding-left: 15px;

		> li:before {
			content: counter(li) " ";
			counter-increment: li;
			font-weight: bold;
		}
	}
}

.docs-section {
	padding-top: 40px;
}

.docs-section-title {
	color: rgba($black, 0.8);
	padding: 10px 20px;
	margin: 0 0 20px;
	font-size: 45px;
	line-height: 60px;
	border-radius: 4px;
	background: url(../img/bg.png) 0 50%;
	border: 1px solid rgba($black, 0.3);

	.is-moment & {
		background-color: $color-moment;
	}

	.is-moment-timezone & {
		background-color: $color-moment-timezone;
	}

	a {
		color: $white;
		text-decoration: none;
	}
}

.docs-method {
	margin: 0 0 60px;
	position: relative;
}

.docs-method-title {
	color: rgba($black, 0.8);
	padding: 0;
	margin: 0 0 20px;
	font-size: 30px;
	line-height: 40px;

	a {
		color: $black;
		text-decoration: none;
		position: relative;

		&:before {
			position: absolute;
			top: 0;
			right: 100%;
			padding-right: 10px;
			display: block;
			color: rgba($black, 0.1);
			content: "#";
			padding-right: 5px;
		}

		&:hover {
			text-decoration: underline;

			&:before {
				color: rgba($black, 0.3);
			}
		}
	}

	span {
		color: rgba($black, 0.2);
		font-size: 0.75em;
	}
}

.docs-method-edit {
	position: absolute;
	top: 0;
	right: -20px;
	line-height: 40px;
	color: rgba($black, 0.3);
	text-decoration: none;
	padding: 0 20px;
	display: block;

	&:hover {
		color: $black;
		text-decoration: underline;
	}
}

.docs-method-signature pre {
	background: rgba($black, 0.2);
	position: relative;

	&:after {
		position: absolute;
		top: 5px;
		right: 10px;
		content: "Method Signature";
		color: rgba($black, 0.3);
		font-size: 12px;
	}

	.is-moment & {
		border-color: rgba($color-moment, 0.7);
		background: rgba($color-moment, 0.15);
	}

	.is-moment-timezone & {
		border-color: rgba($color-moment-timezone, 0.7);
		background: rgba($color-moment-timezone, 0.15);
	}
}
